<template>
  <div class="orderContent flex flex_column">
    <div class="flex flex_between orderContent mb15">
      <!-- <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="add"
      >新建</el-button> -->
      <div>
      </div>

    </div>
    <div v-for=" (item, index) in productList" :key="index" class="tagList">
      <div class="listNav flex flex_between">
        <div>
          <span class="pointer" @click="shrink(item)">
            <i v-if="item.isShow" class="el-icon-arrow-down" />
            <i v-else class="el-icon-arrow-up" />
          </span>
          <span class="f16 ml15 fw">{{ item.produceTaskBillNo }}</span>
          <span class="f16 ml15 ">生产类型: {{ item.produceBillTypeName }}</span>
          <span class="f16 ml15 ">创建时间: {{ item.createDate }}</span>
          <span class="f16 ml15 ">创建人员: {{ item.createPersonName }}</span>
          <el-tag type="danger" class="ml15" size="medium" v-if="item.taskProduceStateName=='已停工'">{{item.taskProduceStateName}}</el-tag>
        </div>
        <span>
        </span>
      </div>
      <div v-show="item.isShow" ref="printDiv" class="fileTable">
        <div class="border lastTdNoBorder">
          <el-row class="flexprint">
            <el-col :span="8" class="pw8">
              <div class="Cmain">
                <p class="Ctitle f16 fw">排版标签</p>
                <div class="Ctable">
                  <el-table
                    :data="item.produceTaskTagList"
                    border
                    fit
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="productTagName"
                      label="标签名称"
                    />
                    <el-table-column
                      prop="productTagSize"
                      label="标签尺寸"
                    />
                    <el-table-column
                      prop="tagBorderRadius"
                      label="R角"
                    />
                    <el-table-column
                      prop="tagBorder"
                      label="边空"
                    />
                  </el-table>
                </div>
              </div>
            </el-col>
            <el-col :span="10" class="pw10">
              <div class="Cmain">
                <p class="Ctitle f16 fw">排版信息</p>
                <el-row :gutter="20" class="Cinfo flexprint">
                  <el-col :span="12" class="pw50">
                    <div><span>版辊尺寸: </span> {{ item ? item.makeup_RollSize : 0 }} mm</div>
                  </el-col>
                  <el-col :span="12" class="pw50">
                    <div><span>数码板面:</span> {{ item ? item.makeup_DigitalEdition : 0 }} mm</div>
                  </el-col>
                  <el-col :span="12" class="pw50">
                    <div><span>跳距:</span>{{ item ? item.makeup_SkipDistance : 0 }} mm</div>
                  </el-col>
                  <el-col :span="12" class="pw50">
                    <div><span>间距:</span>{{ item ? item.makeup_SpaceBetween : 0 }} mm</div>
                  </el-col>
                  <el-col :span="12" class="pw50">
                    <div><span>拼版:</span>{{ item ? item.makeup_Combine : 0 }}</div>
                  </el-col>
                  <el-col :span="12" class="pw50">
                    <div><span>模数:</span>{{ item ? item.makeup_Modules : 0 }}</div>
                  </el-col>
                  <el-col :span="12" class="pw50">
                    <div><span>平张断张:</span>{{ item ? item.makeup_PzDz : 0 }}</div>
                  </el-col>
                  <el-col :span="12" class="pw50">
                    <div><span>色数:</span>{{ item ? item.makeup_Colors : 0 }}</div>
                  </el-col>
                  <el-col :span="12" class="pw50">
                    <div><span>计划成品米数:</span>{{ item ? item.planCpMeters : 0 }}米</div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="6" class="pw6">
              <div class="Cmain">
                <p class="Ctitle f16 fw">生产备注</p>
                <div class="Ctable">
                  {{ item ? item.produceRemark : '' }}
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="Cmain">
            <p class="Ctitle f16 fw">生产材料</p>
            <div class="Ctable">
              <el-table
                :data="item.produceMaterialList"
                border
                fit
                style="width: 100%"
              >
                <el-table-column
                  prop="stockGoodsCode"
                  label="物料编号"
                  min-width="100"
                />
                <el-table-column
                  prop="goodsName"
                  label="物料名称"
                  min-width="100"
                />
                <el-table-column
                  prop="stockGoodsName"
                  label="规格型号"
                  min-width="200"
                />
                <el-table-column
                  prop="supplierName"
                  label="供应商"
                  min-width="100"
                />
                <el-table-column
                  prop="categoryName"
                  label="类型"
                  min-width="100"
                />
                <el-table-column
                  prop="goodsUnitName"
                  label="单位"
                  min-width="100"
                />
                <el-table-column
                  prop="planMaterialQuantity"
                  label="计划数量"
                  min-width="100"
                >
                  <template scope="{row}">
                    {{ row.planMaterialQuantity || '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="produceMaterialRemark"
                  label="备注"
                  min-width="100"
                >
                  <template scope="{row}">
                    {{ row.produceMaterialRemark || '--' }}
                  </template>
                </el-table-column>

              </el-table>
            </div>
          </div>
          <div class="Cmain cb">
            <p class="Ctitle f16 fw">生产工艺</p>
            <div class="Ctable">
              <el-table
                :data="item.produceCraftList"
                border
                fit
                style="width: 100%"
              >
                <el-table-column
                  prop="produceCraft.produceCraftName"
                  label="工艺名称"
                  min-width="100"
                />
                <el-table-column
                  prop="produceCraft.produceEquipmentName"
                  label="生产设备"
                  min-width="100"
                />
                <el-table-column
                  prop="produceCraft.craftTaskState"
                  label="任务状态"
                  min-width="100"
                >
                  <template scope="{row}">
                  <div class="flex">
                    <template v-if="row.produceCraft.craftTaskState===0">
                      <span class="mr5 spot" style="background: rgb(153, 154, 170)" />
                      <span>{{row.produceCraft.craftTaskStateName }}</span>
                    </template>
                    <template v-else-if="row.produceCraft.craftTaskState===1">
                      <span class="mr5 spot" style="background: rgb(63, 97, 241)" />
                      <span>{{row.produceCraft.craftTaskStateName }}</span>
                    </template>
                    <template v-else-if="row.produceCraft.craftTaskState===2">
                      <span class="mr5 spot" style="background: rgb(103, 194, 58)" />
                      <span>{{row.produceCraft.craftTaskStateName }}</span>
                    </template>
                    <template v-else>
                      <span class="mr5 spot" style="background: #E13335" />
                      <span>{{row.produceCraft.craftTaskStateName }}</span>
                    </template>
                  </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="produceCraft.craftTaskPlanUseTime"
                  label="计划用时"
                  min-width="100"
                />
                <el-table-column
                  prop="produceCraft.craftTaskRemark"
                  label="备注"
                  min-width="100"
                >
                  <template scope="{row}">
                    {{ row.produceCraft.craftTaskRemark || '--' }}
                  </template>
                </el-table-column>

              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 全部原因   -->
    <el-dialog
      :title="'原因'"
      :visible.sync="reasonVisibleall"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeCancelDialogall"
    >
      <div class="dialogDody">
        <el-form
          ref="cancelForm"
          :model="cancelForm"
          label-width="0px"
          class="dialogForm"
        >
          <el-form-item label="" prop="reason">
            <el-input
              v-model="cancelForm.cancelReasonall"
              type="textarea"
              :autosize="{ minRows: 5}"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible=false">取 消</el-button>
        <el-button
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveReasonall"
        >保存</el-button>
      </div>
    </el-dialog>

    <!-- 单个原因   -->
    <el-dialog
      :title="'原因'"
      :visible.sync="reasonVisible"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeCancelDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="cancelForm"
          :model="cancelForm"
          label-width="0px"
          class="dialogForm"
        >
          <el-form-item label="" prop="reason">
            <el-input
              v-model="cancelForm.cancelReason"
              type="textarea"
              :autosize="{ minRows: 5}"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible=false">取 消</el-button>
        <el-button
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveReason"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatbytes } from '@/utils'
import printJS from 'print-js'

export default {
  name: '',
  props: {
    orderNo: {
      type: String
    }
  },
  data() {
    return {
      isZzShow: true,
      isZlShow: true,
      mateialList: [], // 资料列表
      productList: [],
      saleOrderID: '',
      saleOrderNo: '',
      reasonVisible: false,
      reasonVisibleall: false,
      addLableLoading: false,
      currentItem: null,
      cancelForm: {
        cancelReason: '',
        cancelReasonall: ''
      },
      productBusniessFrom: {
        baseData: {}
      }
    }
  },
  created() {
    this.saleOrderNo = this.orderNo ? this.orderNo : this.$route.query.saleOrderNo

    this.getTabIndexInfo()
  },
  mounted() {
  },
  methods: {
    add() {
      // this.$router.push({
      //   path: '/production/productionBilling', // 跳转的路径
      //   query: {
      //     orderNo: this.orderNo,
      //     typeStatus: 0
      //   }
      // })
      this.$router.push({
        path: '/production/newproductionBilling', // 跳转的路径
        query: {
          orderNo: this.orderNo,
          typeStatus: 0
        }
      })
    },
    closeCancelDialog() {
      this.reasonVisible = false
    },
    closeCancelDialogall() {
      this.reasonVisibleall = false
    },
    saveReason() {
      this.$api.product
        .StopProduceTaskBill({
          produceTaskID: this.currentItem.produceTaskID,
          stopWorkReason: this.cancelForm.cancelReason
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '成功!'
          })
          this.reasonVisible = false
          this.getTabIndexInfo()
        })
        .catch(() => {
        })
    },
    // 撤回
    handleRevocatio(item) {
      this.$api.product
        .RevocationProduceTaskBill({
          produceTaskID: item.produceTaskID
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '撤回成功!'
          })
          this.getTabIndexInfo()
        })
        .catch(() => {
        })
    },
    saveReasonall() {
      this.$api.product
        .SetOrdersProduceBillsStop({
          saleOrderNo: this.orderNo,
          stopWorkReason: this.cancelForm.cancelReasonall
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '成功!'
          })
          this.reasonVisibleall = false
          this.getTabIndexInfo()
        })
        .catch(() => {
        })
    },
    allStop() {
      this.cancelForm.cancelReasonall = ''
      this.reasonVisibleall = true
    },
    stopOne(item) {
      this.currentItem = item
      this.cancelForm.cancelReason = ''
      this.reasonVisible = true
    },
    productCopy(item) {
      this.$router.push({
        path: '/production/productionBilling', // 跳转的路径
        query: {
          produceTaskBillNo: item.produceTaskBillNo,
          typeStatus: 4
        }
      })
    },
    allFinish() {
      this.$confirm('是否全部确认完成, 确认完成后不可再新建?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.product
          .SureSaleOrderProduceFinished({
            saleOrderNo: this.orderNo
          })
          .then((res) => {
            this.$message({
              type: 'success',
              message: '确认成功!'
            })
            // this.getTabIndexInfo()
          })
          .catch(() => {
          })
      })
    },
    configRow(item) {
      const parmas = {
        produceTaskID: item.produceTaskID
      }
      this.$api.product
        .SureProduceTaskBill(parmas)
        .then((res) => {
          this.$message({
            type: 'success',
            message: '确认成功!'
          })
          this.getTabIndexInfo()
        })
        .catch(() => {
        })
    },
    editRow(item) {
      this.$router.push({
        path: '/production/productionBilling', // 跳转的路径
        query: {
          produceTaskBillNo: item.produceTaskBillNo,
          produceTaskID: item.produceTaskID,
          typeStatus: 2
        }
      })
    },
    deleteRow(item) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.product
          .DeleteProduceTaskBill({
            produceTaskID: item.produceTaskID
          })
          .then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getTabIndexInfo()
          })
          .catch(() => {
          })
      })
    },
    getTabIndexInfo() {
      const parmas = {
        saleOrderNo: this.saleOrderNo
      }
      this.$api.product.GetProduceTaskBillsForOrder(parmas).then((res) => {
        res.forEach(e => {
          this.$set(e, 'isShow', true)
        })
        this.productList = res
      }).catch(() => {

      })
    },
    shrink(item) {
      this.$set(item, 'isShow', !item.isShow)
      // this.$api.product.GetProduceTaskBillDetail({
      //   produceTaskID: item.produceTaskID,
      //   produceTaskBillNo: item.produceTaskBillNo
      // }).then((res) => {
      //   const _data = []
      //   res.produceCraftList.forEach(e => {
      //     const _craf = {}
      //     _craf.produceCraftName = e.produceCraft.produceCraftName
      //     _craf.produceEquipment = e.produceCraft.produceEquipment
      //     _craf.craftTaskState = e.produceCraft.craftTaskState
      //     _craf.craftTaskPlanUseTime = e.produceCraft.craftTaskPlanUseTime
      //     _craf.craftResponsible = e.produceCraft.craftResponsible
      //     _craf.craftTaskRemark = e.produceCraft.craftTaskRemark
      //     _data.push(_craf)
      //   })
      //   this.$set(item, 'orderTagDataList', res.orderTagDataList)
      //   this.$set(item, 'produceMaterialList', res.produceMaterialList)
      //   this.$set(item, 'baseData', res.baseData)
      //   this.$set(item, 'produceCraftList', _data)
      //   this.$set(item, 'isShow', !item.isShow)
      // }).catch(() => {

      // })
    },

    print(index, item) {
      const style = '@page {  } ' + `@media print {
        .flexprint { display: flex;     flex-wrap: wrap;}
         .pw8 { width: 33%}
         .pw10 { flex: 2}
         .pw10 { flex: 1}
         .pw50 { width: 40%; margin: 5px 5px}
         .Ctable {text-align: center;}
         .fileTable{ padding: 10px; }
         .Cmain {  border: 1px solid #E6E6E6;min-height: 200px;}
         .Cmain .Ctitle{  border-bottom: 1px solid #E6E6E6; padding: 10px;}
         .Cmain .Ctable{    margin: 5px 16px 0 16px;}
         .Cmain .Cinfo{  padding: 0 10px; }
         .Cmain .Cinfo div{  padding: 0 10px;}
         .Cmain .Cinfo span{   color: #999AAA;}
         .fileTable .border{ border: solid #EBEEF5; border-width: 0 1px 0 1px;} `
      const _div = this.$refs.printDiv[index]
      printJS({
        printable: _div,
        type: 'html',
        maxWidth: 200,
        style: style,
        scanStyles: false,
        headerStyle: 'font-weight: 600; font-size: 24px',
        header: `订单编号${item.saleOrderNo}--生产任务单${item.produceTaskBillNo}`,
        targetStyles: ['*']
      })
    },
    // 文件大小单位换算
    convertBytes(val) {
      return formatbytes(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.orderContent {
  width: 100%;
  flex: 1;
}
.tagList {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  border: 1px solid #E6E6E6;
  margin-bottom: 16px;
  width: 100%;
  .listNav {
    height: 44px;
    padding: 0 14px;
    background: #f5f6f9;
    border-bottom: 1px solid #E6E6E6;
  }
  .fileTable{
    padding: 10px;
    .border{
      border: solid #EBEEF5;
      border-width: 0 1px 0 1px;
    }
  }
}
.Cmain {
  border: 1px solid #E6E6E6;
  border-bottom: 0;
  border-right: 0;
  min-height: 200px;
  &.cb {
    border-bottom: 1px solid #E6E6E6;
  }
.Ctitle {
  border-bottom: 1px solid #E6E6E6;
  padding: 10px;
  background-color: #F8F9FC;
}
.Ctable {
  margin: 5px 16px 0 16px;
}
.Cinfo {
  padding: 0 10px;
  div {
    margin: 5px 0;
  }
  span {
    color: #999AAA;
  }
}
}
.spot{
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
}
</style>
